const path = require('path');// 打包路径
const HtmlWebpackPlugin = require('html-webpack-plugin');// 打包html
const { CleanWebpackPlugin } = require('clean-webpack-plugin');// 清除空格注释和换行

module.exports = {
	// 打包模式
	// production 生成模式构建构建速度慢，有优化（压缩、优化了）
	// development 开发模式构建构建速度快，没有优化（没有压缩等优化）
	// 如果没有指定，则默认是 production
	mode: 'development',
  entry: './src/index.js',// 入口文件
  output: {
	  path: path.resolve(__dirname, 'dist'),// 编译后的输出的路径
	  filename: 'bundle.js'// 编译后输出的文件名
  },
  module: {
    rules: [
      // 打包css文件
      {
        test: /\.css$/,
        use: [
        	'style-loader', 'css-loader' 
        ]
      },
      // 打包图片和字体图标
      {
        test: /\.(png|jpg|gif|jpeg|svg)$/,
        use: [
          {
            loader: 'file-loader'
          }
        ]
      },
      // 打包字体文件
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
       },
       {
        test: /\.less$/,
        use: [
          'style-loader', // 3. 生成 style 节点插入 DOM
          'css-loader', // 2. 将 css 转为 JavaScript 模块
          'less-loader' // 1. 将 less 转为 css，less-loader 依赖了 less
        ]
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      { // 以 .mjs 或者 .js 结尾的文件使用 babel-loader 处理(ES6转ES5)
        test: /\.m?js$/,
        exclude: /(node_modules)/, // 排除不转换第三方包，一般的第三方包都是转换之后的
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'], // 转码规则
            cacheDirectory: true // 配置babel打包结果缓存，默认会将转换结果缓存到 node_modules/.cache 目录中
          }
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),// 自动删除dist目录
    new HtmlWebpackPlugin({
      template: './index.html',
      minify: {
        removeComments: true, // 删除注释
        collapseWhitespace: true // 去除回车换行空格
      }
     })
   ],
};